<!--  -->
<template>
    <div class=''>
        <div style="margin-left: 30px;margin-top: 30px">
            <el-button type="success" style="height: 35px;width: 70px" @click="add">新增</el-button>
            <el-input v-model="form.codeName" placeholder="请输入备件类型编码或名称" size="large" style="width: 300px;height: 30px;margin-left: 800px"></el-input>
        </div>
        <div style="margin-left: 30px;margin-top: 20px">
            <el-table
                    ref="multipleTable"
                    :data="spareTypes"
                    tooltip-effect="dark"
                    style="width: 74%"
                    :type="'tree'"
                    :show-checkbox="true"
                    row-key="spId"
                    @selection-change="handleSelectionChange"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                        align="center"
                        type="selection"
                        width="50">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="spId"
                        label="序号"
                        width="90">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="spTypename"
                        label="备件类型名称"
                        width="150">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="spTypecode"
                        label="备件类型编码"
                        width="150">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="状态"
                        width="100">
                    <template slot-scope="p">
                        {{ p.row.spTypestatus === 1 ? "启用" : "禁用" }}
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="spRemark"
                        label="备注"
                        width="150">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="founder"
                        label="创建人"
                        width="150">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="createTime"
                        label="创建时间"
                        width="150">
                </el-table-column>

                <el-table-column align="center" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button style="height: 35px;width: 70px;margin-left: 20px" @click="update(scope.row.spId)">编辑</el-button>
                        <el-button style="height: 35px;width: 70px;margin-left: 20px" @click="deleteBatch(scope.row.spId)">删除</el-button>
                        <el-button style="height: 35px;width: 70px;margin-left: 20px" @click="qiyong(scope.row.spId)">启用</el-button>
                        <el-button style="height: 35px;width: 70px;margin-left: 20px" @click="jinyong(scope.row.spId)">禁用</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <el-pagination
                    :current-page.sync="form.page"
                    :page-size="form.pagesize"
                    :page-sizes="[10, 20, 30, 40]"
                    :total="total"
                    background
                    layout="total, sizes ,prev, pager, next, jumper"
                    style="padding: 30px 0;margin-left: 240px"
                    @current-change="selAllSpareTypesByLimit"
                    @size-change="handleSizeChanges"
            />
        </div>
        <el-dialog :title="text" :visible.sync="dialogFormVisible" style="width:1000px;margin-left: 400px">
            <el-form ref="form" :model="forms" label-width="110px">
                <el-form-item label="上级类型">
                    <el-cascader
                            size="large"
                            style="width: 300px"
                            v-model="forms.parentId"
                            :options="options"
                            :props="props"
                            @change="handleChange"
                            clearable
                            expand-trigger="hover"
                            placeholder="请选择"
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="备件类型名称">
                    <el-input v-model="forms.spTypename" size="large" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="备件类型编码">
                    <el-input
                            v-model="forms.spTypecode"
                            size="large"
                            style="width: 300px"
                            placeholder="系统自动生成"
                            disabled
                    ></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="forms.spTypestatus">
                        <el-radio label="1">启用</el-radio>
                        <el-radio label="2">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="forms.spRemark" :rows="4" style="width: 300px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="position: relative;left: -190px">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSpareTypes">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    text:"",
    id:null,
    dialogFormVisible:false,
    forms: {
        spId:null,
        parentId:'',
        spTypename: '',
        spTypecode: '',
        spTypestatus: 1,
        spRemark: '',
        //todo 创建人需获取登录后的数据
        founder:"张三"
    },
    form:{
        codeName:null,
        page:1,
        pageSize:10
    },
    total:0,
    spareTypes:[],
    //备件类型树形数据
    options:[],
    props: {
        value: 'spId',
        label: 'spTypename',
        children: 'children'
    },
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    qiyong(id){
      this.request.get("/spare/spare-types/qiyong/"+id)
        .then(res=>{
            this.$message({
                message: '启用成功',
                type: 'success'
            });
            this.selAllSpareTypesByLimit()
        })
    },
    jinyong(id){
        this.request.get("/spare/spare-types/getShuju/"+id)
            .then(res=>{
                if (res.data===0){
                    this.$message({
                        showClose: true,
                        message: '当前备件类型已被使用，无法禁用',
                        type: 'error'
                    });
                }else {
                    this.request.get("/spare/spare-types/jinyong/"+id)
                        .then(res=>{
                            this.$message({
                                message: '禁用成功',
                                type: 'success'
                            });
                            this.selAllSpareTypesByLimit()
                        })
                }
            })
    },
    deleteBatch(id){
        this.request.get("/spare/spare-types/getShuju/"+id)
            .then(res=>{
                if (res.data===0){
                    this.$message({
                        showClose: true,
                        message: '当前备件类型已被使用，无法删除',
                        type: 'error'
                    });
                }else {
                    this.request.get("/spare/spare-types/deleteBatch/"+id)
                        .then(res=>{
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.selAllSpareTypesByLimit()
                        })
                }
            })
    },
    handleSelectionChange(val){
      console.log(val)
    },
    selOneSpartType(){
      this.request.get("/spare/spare-types/selOneSpartType/"+this.id)
      .then(res=>{
            this.forms = res.data
      })
    },
    addSpareTypes(){
        if (this.id==null){
            this.request.post("/spare/spare-types/addSpareTypes",this.forms)
                .then(res=>{
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.selAllSpareTypesByLimit()
                    this.dialogFormVisible = false
                })
        }else {
            this.request.post("/spare/spare-types/updateSpartType",this.forms)
                .then(res=>{
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.selAllSpareTypesByLimit()
                    this.id = null
                    this.dialogFormVisible = false
                })
        }

    },
    selAllSpareTypesByLimit(){
        this.request.post("/spare/spare-types/selAllSpareTypesByLimit",this.form)
        .then(res=>{
            this.spareTypes = res.data.items
            this.total = res.data.counts
            console.log(this.spareTypes)
        })
    },
    //分页跳转数据
    handleSizeChanges(pageSize) {
        this.form.pagesize = pageSize;
        this.selAllSpareTypesByLimit();
    },
    //备件类型树形查询
    selAllSpareType(){
        this.request.get("/spare/spare-types/selAllSpareType")
            .then(res=>{
                this.options = res.data
            })
    },
    handleChange(value) {
        console.log(value)
    },
    add(){
      this.text = "添加备件类型"
      this.dialogFormVisible = true
    },
   update(spId){
            this.id = spId
            this.selOneSpartType()
            this.text = "修改备件类型"
            this.dialogFormVisible = true
    }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.selAllSpareTypesByLimit()
    this.selAllSpareType()
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>


</style>
